<template>
  <div class="bigRight">
    <div class="bg">
      <div class="title d-flex">
        <span class="text">近半年认证情况</span>
        <div class="line">
          <dv-decoration-3 class="dv-dec-3" />
        </div>
      </div>
      <dv-decoration-2 class="line2"/>
      <div class="barChartsBox">
        <dv-charts :option="option" class="barCharts" />
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'bigRight1',
    props: {
      data: {
        type: Object,
        default: () => {}
      }
    },
    data () {
      return {
        option: {}
      }
    },
    watch: {
      data: {
        handler (newData) {
          this.option = {
            color: ['#1a68ff', '#dee2ec'],
            title: {
              // text: '周销售额趋势',
              style: {
                fill: '#fff'
              }
            },
            legend: {
              data: ['通过率', '未通过率'],
              textStyle: {
                fill: '#ccc'
              },
              bottom: '11%'
            },
            grid: {
              top: '10%',
              right: '5%'
            },
            xAxis: {
              // name: '',
              data: newData.x,
              axisLabel: {
                style: {
                  fill: '#ccc'
                }
              },
              axisTick: {
                style: {
                  stroke: '#2b4eca',
                  lineWidth: 1
                }
              },
              axisLine: {
                style: {
                  stroke: '#2b4eca',
                  lineWidth: 1
                }
              },
              splitLine: {
                style: {
                  stroke: '#2b4eca',
                  lineWidth: 1
                }
              }
            },
            yAxis: {
              // name: '',
              data: 'value',
              axisLabel: {
                style: {
                  fill: '#ccc'
                }
              },
              min: 0,
              max: 100,
              axisTick: {
                show: false,
                style: {
                  stroke: '#2b4eca',
                  lineWidth: 1
                }
              },
              axisLine: {
                style: {
                  stroke: '#2b4eca',
                  lineWidth: 1
                }
              },
              splitLine: {
                style: {
                  stroke: '#2b4eca',
                  lineWidth: 1
                }
              }
            },
            series: [
              {
                // name: '通过率',
                // data: [97, 95, 96, 96, 94, 98],
                ...newData.y[0],
                label: {
                  show: true,
                  position: 'center',
                  offset: [0, 0],
                  formatter: '{value}%',
                  style: {
                    fill: '#fff',
                    fontSize: 14
                  }
                },
                type: 'bar',
                stack: 'a'
              },
              {
                // name: '未通过率',
                // data: [3, 5, 4, 4, 6, 2],
                ...newData.y[1],
                type: 'bar',
                stack: 'a'
              }
            ]
          }
        },
        immediate: true,
        deep: true
      }
    }
  }
</script>

<style scoped lang="less">
  .bigRight {
    width: 100%;
    height: 100%;
    padding: 20px 14px 15px; box-sizing: border-box; overflow: hidden;
    .bg {
      border-radius: 12px;
      background: rgba(35, 62, 249, 0.2);
      height: 100%;
      padding: 10px; box-sizing: border-box;
    }
    .title { position: relative;
      .text {
        color: #e4ebfb;
        font-size: 20px;
      }
      .line {
        width: 100px; height: 30px; margin-left: 10px;
        .dv-dec-3 {
          position: relative;
          width: 100%;
          height: 100%;
        }
      }
    }
    .line2 {width:100%;height:5px;margin-top: 6px}
    .barChartsBox {width: 100%; height: 210px; overflow: hidden;}
    .barCharts { width: 100%; height: 100%}
  }
  .d-flex { display: flex;}
</style>
